<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>调用百度地图API</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"/>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css"/>
		<script src="jquery/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<nav class="navbar navbar-default container-fluid" role="navigation">
		    <div class="container-fluid"> 
		    <div class="navbar-header">
		        <button type="button" class="navbar-toggle" data-toggle="collapse"
		                data-target="#example-navbar-collapse">
		            <span class="sr-only">切换导航</span>
		            <span class="icon-bar"></span>
		            <span class="icon-bar"></span>
		            <span class="icon-bar"></span>
		        </button>
		        <a class="navbar-brand" href="#">穿白色衬衣的少年</a>
		    </div>
		    <div class="collapse navbar-collapse" id="example-navbar-collapse">
		       <ul class="nav nav-tabs ">
		       	<li><a href="index.html"><span class="glyphicon glyphicon-home"></span>首页</a></li>
		       	<li><a href="video.html"><span class="glyphicon glyphicon-film"></span>视频区</a></li>
		       	<li><a href="music.html"><span class="fa fa-print" aria-hidden="true"></span>综合模块</a></li>
		       	<li class="active"><a href="aboutOrarticle.html"><span class="fa fa-book" aria-hidden="true"></span>关于/文章</a></li>
		       </ul>
		    </div>
		    </div>
		</nav>
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="page-header">
						<h4><strong>调用百度API</strong></h4>
						<br>
						<p>作者：<span>穿白色衬衣的少年 </span>日期：<span>2021年8月14日（七夕节） </span>类别：<span>调用百度API</span></p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12"style="font-size: 20px;">
						<p>首先进入百度地图开放平台<a href="https://lbsyun.baidu.com/" target="_blank">https://lbsyun.baidu.com/</a></p>
						<p><img src="img/baidu01.png" class="center-block img-responsive"></p>
						<p>打开网址后点击右上角的登录</p>
						<p>登录进去以后点击开发文档中的JavaScriptAPI开发文档,这里以web开发为例所以用此文档</p>
						<p><img src="img/baidu02.png" class="center-block img-responsive"></p>
						<p>进去之后点击开发指南里有详细的步骤，首先调用此API需要有账号和密钥，所以先申请账号和密钥</p>
						<p><img src="img/baidu03.png" class="center-block img-responsive"></p>
						<p>我这里不过多解释，因为官网的开发文档比我解释的还详细。</p>
						<p>这里点击Demo示例</p>
						<p><img src="img/baidu04.png" class="center-block img-responsive"></p>
						<p>这里有很多种类功能的示例，作者网站使用的是地图属性中的设置3D视角示例</p>
						<p><img src="img/baidu05.png" class="center-block img-responsive"></p>
						<p>最后将其代码复制进开发工具后，加上自己的密钥即可</p>
						<p><img src="img/baidu06.png" class="center-block img-responsive"></p>
				</div>
			</div>
		</div>
		<div class="container"style="margin-bottom: 0;padding-top: 100px;">
			<div class="row">
				<div class="col-md-12 text-center">
					<p>穿白色衬衣少年的个人网站&copy;个人邮箱：m78lixingyun@gmail.com</p>
				</div>
			</div>
		</div>
	</body>
</html>
